<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记录 - BodyGuard体重管理</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      background-color: #f5f5f5;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .page-content {
      height: calc(100vh - 112px);
      overflow-y: auto;
      padding-bottom: 60px;
    }
    .number-input {
      font-size: 3rem;
      font-weight: bold;
      color: #333;
      width: 100%;
      text-align: center;
      background: transparent;
      border: none;
      border-bottom: 2px solid #e2e8f0;
      outline: none;
    }
    .number-wheel {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      padding: 1rem 0;
    }
    .wheel-column {
      position: relative;
      height: 120px;
      overflow: hidden;
      text-align: center;
    }
    .wheel-item {
      height: 40px;
      line-height: 40px;
      font-size: 1.5rem;
      color: #333;
      transition: all 0.2s;
    }
    .wheel-item.active {
      font-size: 2rem;
      font-weight: bold;
      color: #10b981;
    }
    .wheel-item.prev, .wheel-item.next {
      font-size: 1.2rem;
      color: #9ca3af;
    }
  </style>
</head>
<body>
  <!-- 导入状态栏和微信导航栏组件 -->
  <div id="statusbar-container"></div>
  
  <!-- 页面内容区域 -->
  <div class="page-content p-4">
    <div class="bg-white rounded-xl p-5 mb-6">
      <h2 class="text-center text-xl font-medium mb-6">记录今日体重</h2>
      
      <!-- 模拟数字滚轮输入 -->
      <div class="number-wheel mb-3">
        <div class="wheel-column">
          <div class="wheel-item prev">6</div>
          <div class="wheel-item active">6</div>
          <div class="wheel-item next">7</div>
        </div>
        <div class="wheel-column">
          <div class="wheel-item prev">5</div>
          <div class="wheel-item active">6</div>
          <div class="wheel-item next">7</div>
        </div>
        <div class="text-xl font-bold self-center">.</div>
        <div class="wheel-column">
          <div class="wheel-item prev">4</div>
          <div class="wheel-item active">5</div>
          <div class="wheel-item next">6</div>
        </div>
        <div class="text-xl self-center font-medium ml-2">kg</div>
      </div>
      
      <!-- 上次记录显示 -->
      <div class="text-center text-sm text-gray-500 mb-4">
        上次记录：66.7kg（3月20日）
        <span class="text-green-500 ml-1">
          <i class="fas fa-arrow-down text-xs"></i> -0.2kg
        </span>
      </div>
      
      <!-- BMI计算结果 -->
      <div class="bg-green-50 p-3 rounded-lg mb-4">
        <div class="flex justify-between items-center">
          <div>
            <div class="text-sm">当前BMI</div>
            <div class="text-xl font-bold text-green-600">22.8</div>
          </div>
          <div class="text-right">
            <div class="text-sm">健康状态</div>
            <div class="text-green-600">正常范围</div>
          </div>
        </div>
        
        <!-- BMI 范围指示器 -->
        <div class="mt-3 relative">
          <div class="w-full h-3 flex rounded-full overflow-hidden">
            <div class="w-1/5 bg-blue-400"></div>
            <div class="w-1/5 bg-green-400"></div>
            <div class="w-1/5 bg-yellow-400"></div>
            <div class="w-1/5 bg-orange-400"></div>
            <div class="w-1/5 bg-red-400"></div>
          </div>
          <div class="absolute h-5 w-5 bg-white rounded-full border-2 border-green-600 top-1/2 transform -translate-y-1/2" style="left: 32%"></div>
          <div class="flex justify-between text-xs text-gray-500 mt-1">
            <span>偏瘦</span>
            <span>正常</span>
            <span>微胖</span>
            <span>偏胖</span>
            <span>肥胖</span>
          </div>
        </div>
      </div>
      
      <!-- 照片上传区域 -->
      <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 mb-4 text-center">
        <div class="text-gray-500 mb-2">
          <i class="fas fa-camera text-2xl"></i>
        </div>
        <div class="text-sm">添加照片记录（可选）</div>
      </div>
      
      <!-- 笔记输入区 -->
      <div class="border border-gray-200 rounded-lg p-3 mb-4">
        <textarea placeholder="添加今日笔记（可选）" class="w-full h-20 text-sm resize-none border-none outline-none"></textarea>
      </div>
      
      <!-- 提交按钮 -->
      <button class="w-full bg-green-500 text-white py-3 rounded-full font-medium">
        保存记录
      </button>
    </div>
  </div>
  
  <!-- 导入底部导航栏组件 -->
  <div id="tabbar-container"></div>
  
  <script>
    // 加载状态栏组件
    fetch('../components/statusbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('statusbar-container').innerHTML = data;
      });
    
    // 加载底部导航栏组件
    fetch('../components/tabbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('tabbar-container').innerHTML = data;
      });
  </script>
</body>
</html> 